<template>
	<view>
		<view style="position: fixed;top: 20rpx;left: 20rpx;z-index: 9999;"
			class="home acea-row row-center-wrapper iconfont icon-xiangzuo h5_back" @tap="returns">
		</view>
		<!-- 占位内容 -->
		<view class="seize">
			<image class="headimg" mode="widthFix" style="width: 100%;" :src="headImg" rel="preload" />
		</view>
		<!-- END -->
		<Anchor :tabList="tabs" :barFixed="true" :transitionShow="true" barHeight="40" :barTop="0" barId="0"
			@clickTabs="clickTabs" ref="barTabNav">
			<view :id="l.id" v-for="(l,i) in zpData" :key="l.id">
				<view class="box">
					<view v-for="(k,j) in JSON.parse(l.field101)" :key="k.attId" style="width: 100%;height: auto;">
						<image v-if="l.jumpurl" @click="toUrl(l.jumpurl.split(';')[j])" mode="widthFix"
							style="width: 100%;margin-bottom: -6px;" :src="k.sattDir" />
						<image v-else mode="widthFix" style="width: 100%;margin-bottom: -6px;" :src="k.sattDir" />
					</view>
				</view>
			</view>
		</Anchor>
	</view>
</template>
<script>
	import ClipboardJS from '@/plugin/clipboard/clipboard.js';
	import {
		getZpbzDetails
	} from '@/api/api.js';
	import Anchor from './components/anchor.vue'
	export default {
		components: {
			Anchor
		},
		data() {
			return {
				// 选项卡
				// 注意: 必须有text/navTarget属性,其他键值不管随便写和用
				tabs: [],
				// 当前选项卡value
				current: 'one',
				imgArr: [],
				zpData: [],
				headImg: '',
			}
		},
		/**
		 * 转发给朋友
		 */
		// #ifdef MP
		onShareAppMessage: function(res) {
			return {
				title: '正品保障',
				imageUrl: '',
				path: '/pages/news_details/zpbz',
			}
		},
		/**
		 * 分享到朋友圈
		 */
		onShareTimeline() {
			return {
				title: '正品保障',
				imageUrl: '',
				path: '/pages/news_details/zpbz',
			}
		},
		// #endif
		onShow: function() {
			this.getArticleOne();
		},
		/**
		 * 监听滚动
		 * @description 传给子组件处理逻辑
		 * @return void 
		 */
		onPageScroll(e) {
			this.$refs.barTabNav._selectedTab(e.scrollTop);
		},

		methods: {
			returns() {
				uni.navigateBack();
			},
			toUrl(url) {
				// #ifdef MP
				uni.setClipboardData({
					data: url,
					success() {
						uni.showToast({
							title: '复制成功,请用浏览器打开',
							icon: 'none'
						});
					},
					fail(err) {
						console.log('-----err' + JSON.stringify(err))
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
				// #endif

				// #ifndef MP
				window.open(url);
				// #endif
			},
			getArticleOne: function() {
				let that = this;
				getZpbzDetails({
					id: 75
				}).then(res => {
					that.zpData = [];
					that.tabs = [];
					for (let i = 0; i < res.data.length; i++) {
						if (res.data[i].zhengpinname !== '头图') {
							that.zpData.push(res.data[i]);
							let obj = {
								text: res.data[i].zhengpinname, //名称
								navTarget: '', //锚点
								value: i
							};
							that.tabs.push(obj);
						} else {
							that.headImg = JSON.parse(res.data[i].field101)[0].sattDir;
						}
					}
					for (let i = 0; i < that.zpData.length; i++) {
						that.zpData[i].id = 'item' + i.toString();
						that.tabs[i].navTarget = '#' + 'item' + i.toString();
					}

					//console.log(JSON.stringify(that.zpData))
				});
			},
			/**
			 * 选项卡被点击
			 * @description 你无需关心锚点如何工作,写你的业务即可
			 * @param {Object} row - 行数据
			 * @return void
			 */
			clickTabs(row) {
				// 避免重复点击
				if (this.current == row.value) return false;
				// 操作处理
				//console.log(row)
				this.current = row.value
			},
		}
	}
</script>

<style scoped>
	/* 占位内容 */
	.seize {
		background: #fff;
		padding: 0rpx;
		text-align: center;
	}

	/* END */


	/* 选项卡样式 */
	.tabs {
		background: #fff;
		width: 100%;
	}

	/* END */

	.box {
		background: #fff;
		padding: 0rpx;
		border-bottom: 0rpx solid red;
	}
</style>